<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <title>Document</title>
    <style>
        html{
            font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
        }
        .top1{
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #dbdbdb;
            background-color: #fff;
        }
        .shouye{
            position: relative;
            width: 960px;
            height: 60px;
            margin: 0 auto;
        }
        .logo{
            float: left;
            margin-top: 11px;
        }
        .shouye-item1{
            display: inline-block;
            float: left;
            line-height: 60px;
            font-size: 16px;
            margin-left: 40px;
            color: #007fff;
        }
        .shouye-item{
            display: inline-block;
            float: left;
            line-height: 60px;
            font-size: 16px;
            margin-left: 30px;
            color: #666666;
        }
        .search{
            /* float: right; */
            position: absolute;
            top: 14px;
            right: 240px;
            width: 168px;
            height: 30px;
            border: 1px solid #666666;
            border-radius: 4px;
            font-size: 12px;
            color: #999999;
            text-indent: 1em;
        }
        .searchlogo{
            position: absolute;
            left: 690px;
            top: 19px;
            z-index: 9;
        }
        .write{
            /* float: right; */
            position: absolute;
            top: 14px;
            right: 92px;
            background-color: #007fff;
            font-size: 14px;
            color: white;
            width: 108px;
            height: 32px;
            border: none;
            border-radius: 4px;
        }
        .logoin{
            /* float: right; */
            position: absolute;
            top: 14px;
            right: 0px;
            font-size: 14px;
            width: 72px;
            height: 32px;
            border-radius: 4px;
            color: #007fff;
            border: 1px solid #007fff;
            background-color: white;

        }
        .top2{
            width: 100%;
            height: 46px;
            background-color: #fff;
        }
        .nav{
            width: 960px;
            height: 46px;
            /* background-color: yellowgreen; */
            margin: 0 auto;
            /* display: inline-block; */
        }
        .nav-item1{
            font-size: 14px;
            line-height: 46px;
            margin-left: 15px;
            margin-right: 15px;
            color: #007fff;
        }
        .nav-item{
            font-size: 12px;
            line-height: 46px;
            margin-right: 20px;
            color: #666666;
        }
        .con{
            width: 100%;
            height: 1400px;
            background-color: #f5f5f5;
        }
        .cen{
            /* float: left; */
            padding-top: 20px;
            /* background-color: #fff; */
            width: 960px;
            height: 1400px;
            margin: 0 auto;
        }
        .art{
            position: relative;
            background-color: #fff;
            width: 700px;
            height: 1302px;
            float: left;
        }
        .art1{
            float: left;
            width: 700px;
            height: 46px;
            background-color: #fff;
            border-bottom: 1px solid #f1f1f1;
            font-size: 14px;
        }
        .art1 .sort{
            margin-top: 15.5px;
            margin-left: 20px;
        }
        p{
            display: inline;
            color: #007fff;
        }
        .art1 .sort span{
            margin-right: 10px;
        }
        .art2{
            position: relative;
            float: left;
            width: 700px;
            height: 96px;
            border-bottom: 1px solid #f1f1f1;
        }
        .text-image{
            width: 50px;
            height: 50px;
            position: absolute;
            left: 600px;
            top: 23px;
        }
        .user-name{
            position: absolute;
            left: 20px;
            top: 25px;
            font-size: 12px;
            color: #b2bac2;
        }
        .text-title{
            position: absolute;
            left: 20px;
            bottom: 25px;
            font-size: 16px;
            color: #333333;
            font-weight: 900    ;
        }
        .ad{
            /* background-color: #fff; */
            width: 240px;
            height: 1000px;
            float: right;
        }
        .ad1{
            width: 240px;
            height: 270px;
            background-color: #fff;
            position: relative;
        }
        .name{
            font-size: 14px;
            font-weight: 600;
            position: absolute;
            left: 15px;
            top: 10px;
            color: black;
        }
        .sologen{
            font-size: 14px;
            /* font-weight: 600; */
            position: absolute;
            left: 15px;
            top: 36px;
            color: #666666;
        }
        .phone{
            width: 208px;
            height: 38px;
            border: 1px solid #f4f4f4;
            border-radius: 4px;
            background-color: #fbfbfb;
            color: #999999;
            position: absolute;
            left: 15px;
            top: 66px;
            text-indent: 1em;
        }
        .number{
            width: 208px;
            height: 38px;
            border: 1px solid #f4f4f4;
            border-radius: 4px;
            background-color: #fbfbfb;
            position: absolute;
            color: #999999;
            left: 15px;
            top: 124px;
            text-indent: 2em;

        }
        .now-logoin{
            width: 208px;
            height: 34px;
            background-color: #0371df;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            border-radius: 4px;
            position: absolute;
            left: 15px;
            top: 178px;
            text-align: center;
            line-height: 34px;
        }
        .zhuce{
            font-size: 14px;
            /* font-weight: 600; */
            position: absolute;
            left: 15px;
            top: 36px;
            /* font-size: 14px;/ */
            color: #666666;   
            position: absolute;
            left: 15px;
            top: 221px;
        }
        .tongyi{
            font-size: 14px;
            /* font-weight: 600; */
            position: absolute;
            left: 15px;
            top: 245px;
            color: #0371df;
            font-size: 13px;

        }
        .ad2{
            width: 240px;
            height: 200px;
            background-color: #fff;
            margin-top: 20px;
            background: url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de3b28a8489844678673b7ffa0260ad7~tplv-k3u1fbpfcp-zoom-1.image) no-repeat center;
            background-size: 100%;
        }
        .ad3{
            width: 240px;
            height: 200px;
            background-color: #fff;
            margin-top: 20px;
            background: url(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/845f48bf28bf4f6991bbd275376470ba~tplv-k3u1fbpfcp-zoom-1.image) no-repeat center;
            background-size: 100%;
        }
        .ad4{
            width: 240px;
            height: 80px;
            background-color: #fff;
            margin-top: 20px;
            position: relative;
        }
        .erweima{
            float: left;
            width: 50px;
            height: 50px;
            background: url(https://s3.pstatp.com/toutiao/xitu_juejin_web/img/app-install.6226a3b.png) no-repeat center;
            background-size: 100%;
            position: absolute;
            left: 15.6px;
            top: 15.6px;
        }
        .miaoshu{
            width: 164px;
            height: 40px;
            float: left;
            position: absolute;
            left: 86px;
            top: 20.6px;
        }
        .logen{
            font-size: 12px;
            /* font-weight: 600; */
            /* font-size: 14px;/ */
            color: #666666;   
            position: absolute;
            left: px;
            top: 25.6px;
        }
        .xiazai{
            font-size: 14px;
            font-weight: 600;
            /* position: absolute; */
            /* left: 10px; */
            /* top: 10px; */
            color: black;
        }
        .ad5{
            width: 240px;
            height: 332px;
            background-color: #fff;
            margin-top: 20px;
        }
        .zuozhe{
            width: 240px;
            height: 43px;
            border-bottom: 1px solid #f1f1f1;
        }
        .zuozhe p{
            color: black;
            line-height: 43px;
            margin-left: 10px;
            font-size: 14px;
        }
        .zuozhe1{
            width: 240px;
            height: 81px;
            position: relative;
        }
        .touxiang{
            width: 55px;
            height: 55px;
            background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4100417001,2895081324&fm=26&gp=0.jpg) no-repeat center;
            background-size: 100%;
            position: absolute;
            left: 10px;
            top: 20px;
        }
        .miaoshu{
            width: 149px;
            height: 58px;
            position: absolute;
            left: 76px;
            top: 15px;
        }
        .nicheng{
            font-size: 14px;
            font-weight: 600;
            /* position: absolute; */
            /* left: 10px; */
            /* top: 10px; */
            color: black;
        }
        .qianming{
            font-size: 12px;
            /* font-weight: 600; */
            /* font-size: 14px;/ */
            color: #999999;   
            /* position: absolute; */
            /* left: px; */
            /* top: 25.6px; */
        }
        .bangdan{
            margin-top: 3px;
            width: 240px;
            height: 40px; 
            text-align: center;
            line-height: 40px;
            color: #007fff;
            font-size: 14px;
            border-top: 1px solid #f1f1f1;
        }
        .ad6{
            width: 240px;
            height: 120px;
            background-color: #fff;
            margin-top: 20px;
        }
        .guge{
            position: relative;
            width: 240px;
            height: 60px;
        }
        .guge img{
            position: absolute;
            left: 12px;
            top: 12px;
            width: 36px;
            height: 36px;
        }
        .guge p{
            font-size: 14px;
            /* font-weight: 400; */
            /* position: absolute; */
            /* left: 10px; */
            /* top: 10px; */
            color: #333;
            line-height: 60px;
            margin: 60px;
        }
    </style>
</head>
<body>
    <div class="top1">
        <div class="shouye">
            <img class="logo" src="https://s3.pstatp.com/toutiao/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            <a class="shouye-item1" href="">首页</a>
            <a class="shouye-item" href="">沸点</a>
            <a class="shouye-item" href="">话题</a>
            <a class="shouye-item" href="">小册</a>
            <a class="shouye-item" href="">活动</a>
            <input class="search" type="text" value="搜索文字/标签/用户名">
            <img class="searchlogo" src="https://s3.pstatp.com/toutiao/xitu_juejin_web/img/juejin-search-icon.6f8ba1b.svg" alt="">
            <button class="write">写文章</button>
            <button class="logoin">登录</button>
        </div>
    </div>
    <div class="top2">
        <div class="nav">
            <a class="nav-item1" href="">推荐</a>
            <a class="nav-item" href="">后端</a>
            <a class="nav-item" href="">全端</a>
            <a class="nav-item" href="">Android</a>
            <a class="nav-item" href="">IOS</a>
            <a class="nav-item" href="">人工智能</a>
            <a class="nav-item" href="">开发工具</a>
            <a class="nav-item" href="">代码人生</a>
            <a class="nav-item" href="">阅读</a>
        </div>
    </div>
    <div class="con">
        <div class="cen">
            <div class="art">
                <div class="art1">
                    <div class="sort">
                        <span><p>热门</p></span>
                        <span>丨</span>
                        <span>最新</span>
                        <span>丨</span>
                        <span>热榜</span>
                    </div>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=124363429,758373327&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">快手技术团队 . 1天前</span>
                    <span class="text-title">快手大前端技术交流会2020 | 前端技术专场</span>
                </div>
                <div class="art2">
                    <!-- <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=124363429,758373327&fm=26&gp=0.jpg" alt=""> -->
                    <span class="user-name">魔王哪吒 . 9小时前 . HTML</span>
                    <span class="text-title"> 熬夜总结了 “HTML5画布” 的知识点（共10条）</span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1459850236,3837793819&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">前端男孩 . 2小时前 . 前端</span>
                    <span class="text-title">手写Vuex核心原理，再也不怕面试官问我Vuex原理 </span>
                </div>
                <div class="art2">
                    <!-- <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=124363429,758373327&fm=26&gp=0.jpg" alt=""> -->
                    <span class="user-name">稀土君 . 18小时前</span>
                    <span class="text-title">📖沸点七月刊</span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373725239,2245014172&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">六脉神剑 . 5小时前 . Docker</span>
                    <span class="text-title">初识Docker </span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=124363429,758373327&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">
                        晨曦时梦见兮 .
                        4小时前 .
                        Vue.js TypeScript </span>
                    <span class="text-title">深入 TypeScript 中的子类型，进阶 Vue3 源码前必须搞懂的。 </span>
                </div>
                <div class="art2">
                    <!-- <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=124363429,758373327&fm=26&gp=0.jpg" alt=""> -->
                    <span class="user-name">
                        Will__ .
                        6小时前 .
                        JavaScript </span>
                    <span class="text-title">JavaScript Class 中的 Private 成员 </span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1818193220,3141504194&fm=11&gp=0.jpg" alt="">
                    <span class="user-name">
                        掘金酱 .
                        4天前 .
                        前端 后端 deno </span>
                    <span class="text-title">🏆 技术专题第一期 | 聊聊 Deno的一些事儿 </span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2462605824,1862049395&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">
                        半路雨歌 .
                        6小时前 .
                        Java </span>
                    <span class="text-title">一个轻量级的基于RateLimiter的分布式限流实现 </span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3942885871,3292051822&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">
                        shanyue .
                        5小时前 .
                        程序员 </span>
                    <span class="text-title">山月的 2020 上半年总结 | 掘金征文 </span>
                </div>
                <div class="art2">
                    <!-- <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=124363429,758373327&fm=26&gp=0.jpg" alt=""> -->
                    <span class="user-name">
                        XxjzZ .
                        7小时前 .
                        Vue.js </span>
                    <span class="text-title">Vue Composition API 陷阱 </span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1384207092,1254418192&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">
                        TianTianUP .
                        1天前 .
                        JavaScript 面试 </span>
                    <span class="text-title">「一劳永逸」送你21道高频JavaScript手写面试题 </span>
                </div>
                <div class="art2">
                    <img class="text-image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3262817827,3328818484&fm=26&gp=0.jpg" alt="">
                    <span class="user-name">
                        Sunbreak .
                        4小时前 .
                        Flutter </span>
                    <span class="text-title">[Flutter翻译]在Flutter做了前10个商业应用后的经验 </span>
                </div>
            </div>
            <div class="ad">
                <div class="ad1">
                    <p class="name">掘金-juejin.im</p>
                    <p class="sologen">一个帮助开发者成长的社区</p>
                    <input class="phone" type="text" value="请输入手机号">
                    <input class="number" type="text" value="验证码">
                    <div class="now-logoin">立即登录</div>
                    <p class="zhuce">注册登录即表示 </p>
                    <p class=" tongyi">同意 用户协议 、 隐私政策</p>
                </div>
                <div class="ad2">

                </div>
                <div class="ad3">

                </div>
                <div class="ad4">
                    <div class="erweima">
                        
                    </div>
                    <div class="miaoshu">
                        <p class="xiazai">下载掘金客户端</p><br>
                        <p class="logen">一个帮助开发者成长的社区</p>
                    </div>
                </div>
                <div class="ad5">
                    <div class="zuozhe">
                        <p>🎖️作者榜</p>
                    </div>
                    <div class="zuozhe1">
                        <div class="touxiang">

                        </div>
                        <div class="miaoshu">
                            <p class="nicheng">Gopal</p><br>
                            <p class="qianming">前端开发工程师 @ 神秘组织搞技术，要踏踏实实</p>
                        </div>
                    </div>
                    <div class="zuozhe1">
                        <div class="touxiang">

                        </div>
                        <div class="miaoshu">
                            <p class="nicheng">Gopal</p><br>
                            <p class="qianming">前端开发工程师 @ 神秘组织搞技术，要踏踏实实</p>
                        </div>
                    </div>
                    <div class="zuozhe1">
                        <div class="touxiang">

                        </div>
                        <div class="miaoshu">
                            <p class="nicheng">Gopal</p><br>
                            <p class="qianming">前端开发工程师 @ 神秘组织搞技术，要踏踏实实</p>
                        </div>
                    </div>
                    <div class="bangdan">
                    完整榜单&gt; 
                    </div>
                </div>
                <div class="ad6">
                    <div class="guge">
                        <img src="https://s3.pstatp.com/toutiao/xitu_juejin_web/img/juejin-extension-icon.4b79fb4.png" alt="">
                        <p>下载掘金浏览器插件</p>
                    </div>
                    <div class="guge">
                        <img src="https://s3.pstatp.com/toutiao/xitu_juejin_web/img/juejin-miner.b78347c.png" alt="">
                        <p>前往掘金翻译计划</p>
                    </div>  
                </div>
            </div>
        </div>

    </div>
</body>
</html>